<!DOCTYPE html>
<html lang="en">

<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="../AmazeUI-2.4.2/assets/css/amazeui.min.css"/>
    <link href="../css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
    <!--引入Layui-->
    <link href="../layui/css/layui.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <!--引入Vue-->
    <script type="text/javascript" src="../basic/js/vue.js"></script>
    <!--引入Vue的Ajax请求-->
    <script type="text/javascript" src="../basic/js/axios.min.js"></script>

</head>

<body>

<div class="login-boxtitle">
    <a href="index.html"><img alt="" src="../images/logobig.png"/></a>
</div>

<div class="res-banner">
    <div class="res-main">
        <div class="login-banner-bg"><span></span><img alt="" src="../images/big.jpg"/></div>
        <div class="login-box">
<!--            <h3 class="title">客户注册</h3>-->
<!--            <div class="clear"></div>-->
            <div class="login-form" id="formData">
                <form id="form1" class="layui-form">
                    <!--注册号-->
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">注册名</label>
                        <div class="layui-input-block">
                            <input type="text" name="loginName"  lay-verify="required" placeholder="6-16字母数组组成，必须包含特殊字符"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!--密码-->
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">密&emsp;码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password"   required lay-verify="required" placeholder="密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!--姓名-->
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">姓&emsp;名</label>
                        <div class="layui-input-block">
                            <input type="text" name="realName"  required lay-verify="required" placeholder="用户真实姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!--性别-->
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">性&emsp;别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender"   value="2" title="男">
                            <input type="radio" name="gender"  value="1" title="女">
                            <input type="radio" name="gender"  value="0" title="保密" checked="checked">
                        </div>
                    </div>

                    <!--地址-->
                    <div class="layui-form-item" lay-ignore>
                        <div class="layui-inline">
                            <label class="layui-form-label">省&emsp;份</label>
                            <div class="layui-input-block">
                                <select name="province" lay-filter="province">
                                    <option value="">请选择省份</option>
                                    <option v-for="pro in provinces" v-bind:value="pro.provinceId">{{pro.province}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">城&emsp;市</label>
                            <div class="layui-input-block">
                                <select name="city" lay-filter="city">
                                    <option value=''>请选择城市</option>
                                    <option v-for="city in cities" v-bind:value="city.cityId">{{city.city}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">区&emsp;域</label>
                        <div class="layui-input-block">
                            <select name="district" la>
                                <option value="">请选择区域</option>
                                <option value="" v-for="district in districts" v-bind:value="district.areaId">{{district.area}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">地&emsp;址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required lay-verify="required"
                                   placeholder="具体地址到门牌号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!--邮箱-->
                    <div class="layui-form-item" lay-ignore>
                        <label class="layui-form-label">邮&emsp;箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" required lay-verify="required"
                                   placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <a href="login.html" class="layui-btn">登录</a>
                        </div>
                    </div>
                </form>
            </div>

        </div>


    </div>

    <div class="footer ">
        <div class="footer-hd ">
            <p>
                <a href="# ">恒望科技</a>
                <strong>|</strong>
                <a href="# ">商城首页</a>
                <strong>|</strong>
                <a href="# ">支付宝</a>
                <strong>|</strong>
                <a href="# ">物流</a>
            </p>
        </div>
        <div class="footer-bd ">
            <p>
                <a href="# ">关于恒望</a>
                <a href="# ">合作伙伴</a>
                <a href="# ">联系我们</a>
                <a href="# ">网站地图</a>
                <em>© 2015-2025 Hengwang.com 版权所有</em>
            </p>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    /**
     * @author shikundai
     * @date 2020/11/1
     * @time 11:25
     * @description  参数绑定
     */
    var vm=new Vue({
        el:"#formData",
        data:{//相关数据的参数绑定
            //省份下拉列表
            provinces:[],
            //城市下拉列表
            cities:[],
            //区域下拉列表
            districts:[]
        },
        methods:{
            getData:function () {
                console.log("OK");
                console.log(vm.provinces);
            }
        }

    });


    var form;
    var layer;
    layui.use(['layer','form'], function () {
        form = layui.form;//使用
        layer = layui.layer;//弹出层

        form.on('submit(formDemo)', function (data) {
            $.ajax({
                url:"../customer/register",
                type:'POST',
                data:data.field,
                dataType:'json',
                success:function(result){
                    if (result.code==20){//注册成功
                        layer.msg("注册成功");
                        window.setTimeout("window.location.href='login.html'",2000);

                    } else {
                        layer.msg(result.msg);
                    }
                }
            });


            return false;
        });
        /*
        * 监听省份选择
        * */
        form.on('select(province)', function(data){
            //获得选中的省份ID
            var provinceId=data.value;
            /*
            * 通过省份ID查询相关的城市
            * */
            $.get("../adress/getCities",{"provinceId":provinceId},function (res) {
                vm.cities=res.data;
                window.setTimeout("form.render('select')",100);//100毫秒后重新渲染表单
            });
        });
        /*
        * 监听城市选择
        * */
        form.on('select(city)',function (data) {
            //通过城市ID获取区域信息
            $.get("../adress/getArea",{"cityId":data.value},function (res) {
                vm.districts=res.data;
                window.setTimeout("form.render('select')",100);//100毫秒后重新渲染表单
            })
        });

    });

    /**
     * @author shikundai
     * @date 2020/11/1
     * @time 15:08
     * @description 页面加载完执行的相关操作
     */
    $( function () {
        /*
        * 获得省份信息
        * */
        $.ajax({
            type : "get", //请求方式
            async: false, // fasle表示同步请求，true表示异步请求
            contentType: "application/json;charset=UTF-8", //请求的媒体类型
            url : "../adress/getAllProvince",//请求地址
            data : {}, //数据，json字符串
            success : function(result) { //请求成功
                vm.provinces=result.data;
            },
            error : function(e){  //请求失败，包含具体的错误信息
                console.log(e.status);
                console.log(e.responseText);
            }
        });



    });

</script>

</html>